<template>
  <div class="search">
    <span class="searchIcon"></span>
    <span @click="clearInput" v-if="searchVal" class="closeIcon"></span>
    <input type="text" v-model="searchVal" placeholder="请输入关键字或品牌名称" />
    <div class="noResult" v-if="searchVal&&searchResults.length === 0">对不起没有搜索结果</div>
    <div class="searchResult" v-else>
      <div
        class="result"
        v-for="(item,index) in searchResults"
        :key="index"
        @click="move2Map(item)"
      >{{item.Name}}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getShopServer } from "../server/index";
export default {
  props: {},
  data() {
    return {
      searchVal: "",
      searchResults: []
    };
  },
  computed: {
    ...mapState("home", {
      searchDatas: state => state.shopInfo
    })
  },
  created() {},
  mounted() {},
  watch: {
    // 监听输入框value变化
    searchVal(newVal) {
      if (newVal) {
        this.filterDatas(newVal, () => {
          // 触发组件change事件
          this.$emit("change", this.searchResults);
        });
      } else {
        this.clearInput();
        this.$emit("change", []);
      }
    }
  },
  methods: {
    filterDatas(val, cb) {
      // 模糊搜索拿到搜索结果
      getShopServer("71", val)
        .then(res => {
          if (res.data.c === 200) {
            this.searchResults = res.data.v;
            cb();
          }
        })
        .catch(error => {
          this.searchResults = [];
        });
    },
    // 清理输入框内容
    clearInput() {
      this.searchVal = "";
      this.searchResults = [];
      // 重置地图
      if (this.$parent.resetMap) {
        this.$parent.resetMap();
      }
    },
    // 触发组件选择事件
    move2Map(item) {
      this.$emit("select", item);
    }
  },
  components: {}
};
</script>

<style scoped lang='less'>
.search {
  position: absolute;
  left: 50%;
  top: 65px;
  transform: translateX(-50%);
  z-index: 100;
  .searchIcon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("../assets/images/details/search_icon_d.png") no-repeat
      center;
    background-size: contain;
  }
  .closeIcon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("../assets/images/details/search_clear_icon.png") no-repeat
      center;
    background-size: 60%;
  }
  input {
    width: 855px;
    height: 57px;
    background-color: #f8f8f8;
    border-radius: 30px;
    border: solid 1px #b88728;
    font-size: 21px;
    color: #8d6518;
    text-indent: 60px;
    &::-webkit-input-placeholder {
      color: #8d6518;
      font-size: 21px;
    }
  }
  .noResult {
    position: absolute;
    left: 50%;
    top: 55px;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 0px 0px 8px 8px;
    border: solid 1px #b88728;
    z-index: -1;
    padding: 12px 20px;
    width: 730px;
    height: 45px;
    font-size: 23px;
    line-height: 45px;
    letter-spacing: 1px;
    color: #a07854;
    background-color: #ffffff;
    text-indent: 18px;
  }
  .searchResult {
    position: absolute;
    left: 50%;
    top: 55px;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 0px 0px 8px 8px;
    border: solid 1px #b88728;
    z-index: -1;
    max-height: 370px;
    overflow: auto;
    .result {
      margin: 12px 20px;
      width: 770px;
      height: 45px;
      font-size: 23px;
      line-height: 45px;
      letter-spacing: 1px;
      color: #a07854;
      background-color: #ffffff;
      border-radius: 23px;
      text-indent: 18px;
      &:hover {
        background-color: #e3cfaf;
      }
    }
  }
}
</style>
